<!DOCTYPE html>
<html>

<head>
    <title>AJ-IAM 管理后台</title>

    <!--#include file="common/head.html" -->
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <menu>
        <h3 style="margin:20px 0 0 13px;color:#2f518c">AJ-IAM 管理后台</h3>
        <br />
        <br />
        <br />
        <ul>
            <li>
                <a href="pages/welcome.jsp" target="iframe">首页</a>
            </li>
            <li>
                <a href="user.html" target="iframe">用户管理</a>
            </li>
            <li>
                <a href="app.html" target="iframe">应用管理</a>
            </li>
            <li>
                <a href="pages/object-type.jsp" target="iframe">组织管理</a>
            </li>
            <li>
                <a href="tenant.html" target="iframe">租户管理</a>
            </li>
            <li>
                <a href="token.html" target="iframe">Token 管理</a>
            </li>
            <li>
                <a href="module-permission.html" target="iframe">模块权限管理</a>
            </li>
            <li>
                <a href="user_login_log.html" target="iframe">用户登录日志</a>
            </li>
        </ul>
    </menu>
    <div class="container">
        <iframe src="welcome.html" name="iframe"></iframe>
    </div>
    <div class="userInfo">
        <a href="###" @click="showUserInfoPanel = true" class="username">{{userInfo.loginId}}</a> {{loginState ? '已登录' :
        '未登录'}} <a v-if="loginState" href="#" @click="logout">登出</a>
        <span v-if="isTopAdmin">切换租户 <select class="tenantSelect" onchange="changeTenant(this)"></select></span>
        <span v-if="!isTopAdmin">租户：{{userInfo.tenantName}}</span>

        <div class="userInfoPanel" v-if="showUserInfoPanel">
            <h2 style="text-align:left;padding-left:10px;">用户信息</h2>
            <table>
                <tr>
                    <td>用户 id：</td>
                    <td>#{{userInfo.id}}</td>
                    <td>用户账号：</td>
                    <td>{{userInfo.loginId}}</td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td><input type="text" v-model="userInfo.username" /></td>
                    <td>真实姓名</td>
                    <td><input type="text" v-model="userInfo.realName" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <label>
                            <input type="radio" v-model="userInfo.gender" value="male"> 男
                        </label>
                        <label>
                            <input type="radio" v-model="userInfo.gender" value="female"> 女
                        </label>
                        <label>
                            <input type="radio" v-model="userInfo.gender" value="other"> 未知
                        </label>
                    </td>
                    <td>生日</td>
                    <td><input type="text" v-model="userInfo.birthday" /></td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td><input type="text" v-model="userInfo.phone" /></td>
                    <td>邮件</td>
                    <td><input type="text" v-model="userInfo.email" /></td>
                </tr>
                <tr>
                    <td>地区</td>
                    <td colspan="3"><input type="text" v-model="userInfo.email" /></td>
                </tr>
                <tr>
                    <td>租户：</td>
                    <td>{{userInfo.tenantName}}#{{userInfo.tenantId}} </td>
                    <td>组织：</td>
                    <td></td>
                </tr>
                <tr>
                    <td>简介</td>
                    <td colspan="3"><textarea style="width:92%;min-height:50px;padding:5px"
                            v-model="userInfo.content"></textarea>
                    </td>
                </tr>
            </table>

            <button class="button-1 small" @click="showUserInfoPanel = false">关闭</button>
        </div>
    </div>
    <script>
        new Vue({
            el: '.userInfo',
            data: {
                loginId: '',
                loginState: false,
                userInfo: {},
                showUserInfoPanel: false
            },
            mounted() {
                // 调接口判断是否已经登录
                aj.xhr.get('../../iam_api/user/info', json => {
                    if (json.status && json.data) {
                        console.log(json.data)

                        this.userInfo = json.data;
                        this.loginState = true;
                    } else {
                        if (confirm('你未登录！是否跳转到登录页面？')) {
                            // location.assign(`../../iam_api/oidc/authorization?response_type=code&client_id=lKi9p9FyicBd6eA` +
                            //     `&state=${Math.random().toString(36).substring(2, 15)}` +
                            //     `&nonce=${Math.random().toString(36).substring(2, 15)}` +
                            //     `&web_uri=${encodeURIComponent(location.href)}` +
                            //     `&redirect_uri=${encodeURIComponent('../../iam_api/client/callback')}`);

                            location.assign(`../../iam_api/client/to_login?web_url=${encodeURIComponent(location.href)}`);
                        }
                    }
                });
            },
            computed: {
                isTopAdmin() {
                    return this.userInfo.loginId === 'admin' && this.userInfo.tenantId === 0;
                }
            },
            methods: {
                loadTenantList() {
                    aj.xhr.get('../../iam_api/common_api/tenant/list', json => {
                        const list = json.data;
                        const selectEl = document.querySelector('.tenantSelect');

                        // 遍历数据数组
                        list.forEach(item => {
                            // 创建 option 元素
                            const option = document.createElement('option');
                            // 设置 option 的值和显示文本
                            option.value = item.id; // 或者使用 item.name 作为 value
                            option.textContent = item.name;
                            // 将 option 添加到 select 元素中
                            selectEl.appendChild(option);
                        });
                    });
                },
                logout() {
                    if (confirm('确定要登出吗？'))
                        aj.xhr.postForm('../../iam_api/user/logout', {}, json => {
                            if (json.status) {
                                localStorage.removeItem('accessToken');
                                localStorage.removeItem('userInfo');

                                location.assign('../../iam_api/client/to_login?web_url=' + encodeURIComponent(location.href));
                            } else {
                                alert('登出失败：' + json.message);
                            }
                        });
                }
            }
        });

        setTimeout(() => {
            // 显示选中项
            var tenantId = localStorage.getItem("tenantId");

            if (tenantId != null) {
                var option = document.querySelector('.tenantSelect option[value="' + tenantId + '"]');

                if (option)
                    option.setAttribute('selected', true);
            }
        }, 300);

        function changeTenant(selectEl) {
            var tenantId = selectEl.options[selectEl.selectedIndex].value;

            if (tenantId)
                localStorage.setItem("tenantId", tenantId);// 存储
            else
                window.localStorage.removeItem('tenantId');

            window.parent.frames.center.location.reload();
        }
    </script>
</body>

</html>